<template lang="html">
  <div :class="['wrapper', {'isPlay': isPlay}]" @click="play">
    <div class="icon_wrap" v-if="isPlay">
      <div class="icon_music" v-if="audioLoadCompleted">
        <span :class="['m1', {'m': audioIsPlaying}]"></span>
        <span :class="['m2', {'m': audioIsPlaying}]"></span>
        <span :class="['m3', {'m': audioIsPlaying}]"></span>
      </div>

      <spinner
        size="6"
        color="#309FEA"
        margin="2px"
        top="0px"
        justifyContent="flex-start"
        v-else/>


    </div>
    <div class="text_wrapper">
      <p class="text_content">{{ title }}</p>
      <div class="text_info">

        <div class="ico">
          <i class="iconfont2 icon-bofang"></i>
        </div>

        <div class="view_num">{{ browseInfo.browse | browseFilter }}次</div>
        <div class="o_time">{{ time | fromNow }}</div>
      </div>
    </div>
  </div>

</template>

<script lang="ts">
import Vue from 'vue'
import Spinner from '../Spinner.vue'

import { fromNow } from '../../util/timeUtil'
import { numberToArab } from '../../util/numberUtil'

export default Vue.extend({
  data () {
    return {
    }
  },
  props: {
    summary: {
      type: String,
      default: '监听音频播放时间并更新进度条'
    },
    title: {
      type: String,
      default: ''
    },
    time: {
      type: String,
      default: '-'
    },
    browseInfo: {
      type: null,
    },
    isPlay: {
      type: Boolean,
      default: false
    },
    curIndex: {
      type: Number,
      default: 0
    },
    audioIsPlaying: {
      type: Boolean,
      required: true
    },
    audioLoadCompleted: {
      type: Boolean,
      default: false
    }
  },
  components: {
    Spinner
  },
  watch: {
    audioLoadCompleted (val) {
      console.info('audio load', val)
    }
  },
  filters: {
    fromNow(ts: string): string {
      return fromNow(parseInt(ts))
    },

    browseFilter(browse: string): string {
      return numberToArab(browse)
    }
  },
  methods: {
    play(): void {
      this.$emit('play', this.curIndex)
    }
  },
  mounted () {
  }
})
</script>

<style lang="less" scoped>
@import '../../assets/less/mixins.less';
.wrapper {
  text-align: left;
  font-family: 'SimHei';
  background-color: #fff;
  padding-right: 20px;
  border-bottom: 1px solid #EAEAEA;
  .flexLayout(left);
  .icon_wrap {
    flex-basis: 10%;
    position: relative;
  }
}
.text_wrapper {
  flex-basis: 90%;
  flex: 1;
  display: flex;
  padding: 10px 0;
  flex-direction: column;
  .text_content {
    font-size: 16px;
    margin-bottom: 3px;
    line-height: 20px;
    .ellipsis(2);
  }
}
.text_info {
  font-size: 12px;
  color: #999;
  height: 20px;
  display: flex;
  .flexLayout(left);
  .ico {
    // transform: scale(0.6);
    // padding-top: 2px;
    margin-right: 5px;
    height: 100%;
    display: flex;
    align-items: center;
    // margin-left: -2px;
    box-sizing: border-box;
  }
  i {
    font-size: 12px;
  }
  div:nth-child(2){
    margin: 0 15px 0 0;
  }

  .view_num, .o_time {
    line-height: 20px;
  }
}
.isPlay {
  color: #309FEA;

  .view_num, .o_time {
    color: #309FEA;
  }

  i {
    color: #309FEA;
  }
}
.icon_music {
  width: 20px;
  height: 20px;
  font-size: 0;
  background-color: transparent;
  display: flex;
  align-items:flex-end;
  span {
    display: inline-block;
    width: 4px;
    // height: 10px;
    background-color: #309FEA;
    animation: move 2s infinite alternate;
    animation-play-state: paused;
  }
  .m1 {
    height: 6px;
  }
  .m2 {
    margin: 0 2px;
    height: 10px;
    animation-delay: -0.15s;
  }
  .m3 {
    height: 15px;
    animation-delay: -0.5s;
  }
}

@keyframes move {
  0% {
    height: 30%;
  }
  30%, 80% {
    height: 70%;
  }
  60% {
    height: 40%;
  }
  100% {
    height: 50%;
  }
}

.m {
  animation-play-state: running!important;
}
</style>
